<template>
  <div class="son-page-container" :style="{ backgroundImage: `url(${website_bg_url})` }">
    <el-container class="main-container">
      <el-header height="10vh" class="header-container">
        <MyHeader />
      </el-header>
      <el-main>
        <div class="area-container right-area">
          <el-row :gutter="20" class="hot-list-row">
                <el-col :span="6" v-for="(hot, idx) in hotLists" :key="hot.title">
                  <div class="hot-list-card">
                    <div class="hot-list-title">
                      <span>{{ hot.title }}</span>
                      <el-tag size="small" type="success" style="margin-left: 8px; background-color: #21ba45 !important; border-color: #21ba45 !important; color: #fff !important;">{{hot.text}}</el-tag>
                    </div>
                    <div class="hot-list-container">
                      <ul class="hot-list-ul">
                        <li v-for="item in hot.list" :key="item.rank" class="hot-list-li">
                          <el-tag size="small" :type="getRankType(item.rank)" effect="dark" class="hot-rank">{{ item.rank }}</el-tag>
                          <span class="hot-title" @click="handleTitleClick(item)" style="cursor:pointer;">{{ item.title }}</span>
                          <span
                            class="hot-hot"
                            :class="{ 'extract-btn': hoverHotIndex === item.rank && hoverHotListCode === hot.code }"
                            @mouseenter="handleHotMouseEnter(item.rank, hot.code)"
                            @mouseleave="handleHotMouseLeave"
                            @click="handleExtractClick(hot, item)"
                            style="cursor: pointer;"
                          >
                            {{ (hoverHotIndex === item.rank && hoverHotListCode === hot.code) ? '提取文案' : formatHot(item.hot) }}
                          </span>
                        </li>
                      </ul>
                    </div>
                    <div class="hot-list-footer">
                      <span class="update-time">{{ formatRelativeTime(hot.lastUpdate) }}</span>
                      <el-icon class="refresh-icon" @click="handleRefresh(hot.code)"><Refresh /></el-icon>
                    </div>
                  </div>
                </el-col>
              </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
  <MyDialog v-model="showExtractDialog" title="用户信息" width="75%">
    <!-- 这里可以传入任何自定义内容 -->
    <TextExtract ref="textExtractRef" :urlInfo="urlInfo"></TextExtract>
    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="copyTextResult">复制</el-button>
      <el-button @click="showExtractDialog = false">关闭</el-button>
    </template>
  </MyDialog>

  <!-- 标题弹出框 -->
  <MyDialog v-model="showTitleDialog" title="提取文案" width="500px">
    <div style="padding: 20px; text-align: center;">
      <p :style="{
        fontSize: '16px',
        lineHeight: '1.6',
        wordBreak: 'break-all',
        color: theme === 'dark' ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)'
      }">{{ currentTitle }}</p>
    </div>
    <template #footer>
      <el-button @click="copyTitle" type="primary">复制</el-button>
      <el-button @click="showTitleDialog = false">关闭</el-button>
    </template>
  </MyDialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import { Refresh } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import MyHeader from '../common/MyHeader.vue';
import MyDialog from '../common/MyDialog.vue';
import TextExtract from './exract/TextExtractNew.vue';
import utils from '../../utils/utils';
// 网站背景图
const website_bg_url = ref('')
const currentTime = ref('')
const showExtractDialog = ref(false);
const showTitleDialog = ref(false);
const currentTitle = ref('');
const textExtractRef = ref();
const urlInfo = ref({
  platformName: '',
  platformLink: '',
})

const copyTextResult = () =>{
  // 获取 TextExtract 组件的引用
  const textExtractComponent = textExtractRef.value;

  console.log('textExtractComponent:', textExtractComponent); // 调试信息

  if (!textExtractComponent) {
    ElMessage.warning('组件未加载，请稍后再试');
    return;
  }

  // 检查是否正在加载
  if (textExtractComponent.isLoading) {
    ElMessage.warning('数据正在加载中，请稍后再试');
    return;
  }

  // 获取文本内容
  const textToCopy = textExtractComponent.textResult;
  console.log('textToCopy:', textToCopy); // 调试信息

  if (textToCopy && textToCopy.trim()) {
    // 使用 Clipboard API 复制文本
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(textToCopy).then(() => {
        ElMessage.success('复制成功！');
      }).catch(() => {
        // 如果 Clipboard API 失败，使用备用方法
        fallbackCopyTextToClipboard(textToCopy);
      });
    } else {
      // 备用复制方法
      fallbackCopyTextToClipboard(textToCopy);
    }
  } else {
    ElMessage.warning('没有可复制的内容，请等待数据加载完成');
  }
}

// 备用复制方法
const fallbackCopyTextToClipboard = (text: string) => {
  const textArea = document.createElement('textarea');
  textArea.value = text;
  textArea.style.position = 'fixed';
  textArea.style.left = '-999999px';
  textArea.style.top = '-999999px';
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    const successful = document.execCommand('copy');
    if (successful) {
      ElMessage.success('复制成功！');
    } else {
      ElMessage.error('复制失败，请手动复制');
    }
  } catch (err) {
    ElMessage.error('复制失败，请手动复制');
  }

  document.body.removeChild(textArea);
}

// 复制标题
const copyTitle = () => {
  if (currentTitle.value && currentTitle.value.trim()) {
    // 使用 Clipboard API 复制文本
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(currentTitle.value).then(() => {
        ElMessage.success('复制成功！');
      }).catch(() => {
        // 如果 Clipboard API 失败，使用备用方法
        fallbackCopyTextToClipboard(currentTitle.value);
      });
    } else {
      // 备用复制方法
      fallbackCopyTextToClipboard(currentTitle.value);
    }
  } else {
    ElMessage.warning('没有可复制的内容');
  }
}

// 刷新数据
const handleRefresh = (code: string) => {
  if(code === 'hotSearchweibo'){
    // initWeiboHotList()
  } else if(code === 'rankingbili') {
    initBilibiliHotList()
  } else if(code === 'hotdyrd') {
    initDouYin()
  } else if(code === 'hottoutiao') {
    initTouTiao()
  } else if(code === 'hotzhihu') {
    initZhiHu()
  } else if(code === 'topbaidu') {
    initBaidu()
  } else if(code === 'tiebabaidu') {
    initBaiduTieBa()
  } else if(code === 'hotinews') {
    initTengXunNes()
  } else if(code === 'apijuejin') {
    initJueJin()
  } else if(code === 'hot163') {
    initWangYi()
  } else if(code === 'appsgame') {
    initLol()
  } else if(code === 'thepaper') {
    initPengPai()
  } else if(code === 'baidubk') {
    initBaiduBaiKe()
  } else if(code === 'weread') {
    initWeRead()
  } else if(code === 'music163') {
    initWangyiyun()
  }
}

// 格式化相对时间
const formatRelativeTime = (timestamp: number) => {
  if (!timestamp) return ''
  const now = Date.now()
  const diff = Math.floor((now - timestamp) / 1000) // 秒

  if (diff < 60) {
    return `${diff}秒前`
  } else if (diff < 3600) {
    return `${Math.floor(diff / 60)}分钟前`
  } else if (diff < 86400) {
    return `${Math.floor(diff / 3600)}小时前`
  } else {
    return `${Math.floor(diff / 86400)}天前`
  }
}

onMounted(() => {
  initWebsiteBgUrl()
  // initWeiboHotList()
  initBilibiliHotList()
  initDouYin()
  initTouTiao()
  initZhiHu()
  initBaidu()
  initBaiduTieBa()
  initTengXunNes()
  initJueJin()
  initWangYi()
  initLol()
  initPengPai()
  initBaiduBaiKe()
  initWeRead()
  initWangyiyun()
  setInterval(() => {
    hotLists.value = [...hotLists.value]
  }, 1000)
})

// 读取配置，获取网站背景图
const initWebsiteBgUrl = async () => {
  const response = await axiosUtil.post('api/pc/site/get_agent_config', {})
  if (response.data.code === 0 && response.data.data) {
    website_bg_url.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_bg || ''
  }
}

// 初始化微博热搜榜
/*const initWeiboHotList = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/hotSearchweibo', {})
    if (response.data.ok === 1 && response.data.data?.realtime) {
      const realtimeHot = response.data.data.realtime.map((item, index) => ({
        rank: item.rank + 1,
        title: item.word,
        url: 'https://s.weibo.com/weibo?q='+item.word_scheme+'&t=31&band_rank=1&Refer=top',
      }))

      const weiboItem = hotLists.value.find(item => item.code === 'hotSearchweibo')
      if (weiboItem) {
        weiboItem.list = realtimeHot
        weiboItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}*/

//初始化哔哩哔哩
const initBilibiliHotList = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/rankingbili', {})
    if (response.data.code === 0 && response.data.data?.list) {
      const list = response.data.data.list.map((item, index) => ({
        rank: index + 1,
        title: item.title,
        url: item.short_link_v2,
        hot: item.stat.view
      }))

      const bilibiliItem = hotLists.value.find(item => item.code === 'rankingbili')
      if (bilibiliItem) {
        bilibiliItem.list = list
        bilibiliItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//初始化抖音
const initDouYin = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/hotdyrd', {})
    if (response.data.status_code === 0 && response.data.data.word_list) {
      const list = response.data.data.word_list.map((item, index) => ({
        rank: index + 1,
        title: item.word,
        url: 'https://www.douyin.com/hot/'+item.sentence_id,
        hot: item.hot_value
      }))

      const douyinItem = hotLists.value.find(item => item.code === 'hotdyrd')
      if (douyinItem) {
        douyinItem.list = list
        douyinItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//初始今日头条
const initTouTiao = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/hottoutiao', {})
    if (response.data.status === 'success' && response.data.data) {
      const list = response.data.data.map((item, index) => ({
        rank: index + 1,
        title: item.Title,
        url: item.Url,
        hot: item.HotValue
      }))

      const touTiaoItem = hotLists.value.find(item => item.code === 'hottoutiao')
      if (touTiaoItem) {
        touTiaoItem.list = list
        touTiaoItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//初始知乎
const initZhiHu = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/hotzhihu', {})
    if (response.data.data) {
      const list = response.data.data.map((item, index) => ({
        rank: index + 1,
        title: item.target.title,
        url: item.target.url,
        hot: item.detail_text
      }))

      const zhihuItem = hotLists.value.find(item => item.code === 'hotzhihu')
      if (zhihuItem) {
        zhihuItem.list = list
        zhihuItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//百度
const initBaidu = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/topbaidu', {})
    if (response.data.success && response.data.data.cards[0].content) {
      const list = response.data.data.cards[0].content.map((item, index) => ({
        rank: index + 1,
        title: item.word,
        url: item.url,
        hot: item.hotScore
      }))

      const baiduItem = hotLists.value.find(item => item.code === 'topbaidu')
      if (baiduItem) {
        baiduItem.list = list
        baiduItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//百度贴吧
const initBaiduTieBa = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/tiebabaidu', {})
    if (response.data.errmsg === 'success' && response.data.data.bang_topic.topic_list) {
      const list = response.data.data.bang_topic.topic_list.map((item, index) => ({
        rank: index + 1,
        title: item.topic_name,
        url: item.topic_url,
        hot: item.discuss_num
      }))

      const baidutiebaItem = hotLists.value.find(item => item.code === 'tiebabaidu')
      if (baidutiebaItem) {
        baidutiebaItem.list = list
        baidutiebaItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//腾讯新闻
const initTengXunNes = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/hotinews', {})
    if (response.data.idlist[0].newslist) {
      //这里需要删掉第一个元素
      let list = response.data.idlist[0].newslist.slice(1).map((item, index) => ({
        rank: index + 1,
        title: item.longtitle,
        url: item.url,
        hot: item.readCount
      }))

      const tengxunNewsItem = hotLists.value.find(item => item.code === 'hotinews')
      if (tengxunNewsItem) {
        tengxunNewsItem.list = list
        tengxunNewsItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//稀土掘进
const initJueJin = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/apijuejin', {})
    if (response.data.err_msg === 'success' && response.data.data) {
      const list = response.data.data.map((item, index) => ({
        rank: index + 1,
        title: item.content.title,
        url: 'https://juejin.cn/post/'+item.content_id,
        hot: item.content_counter.hot_rank
      }))

      const baidutiebaItem = hotLists.value.find(item => item.code === 'apijuejin')
      if (baidutiebaItem) {
        baidutiebaItem.list = list
        baidutiebaItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//网易新闻
const initWangYi = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/hot163', {})
    if (response.data.code===200 && response.data.data.list) {
      const list = response.data.data.list.map((item, index) => ({
        rank: index + 1,
        title: item.title,
        url: item.url,
      }))

      const baidutiebaItem = hotLists.value.find(item => item.code === 'hot163')
      if (baidutiebaItem) {
        baidutiebaItem.list = list
        baidutiebaItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//英雄联盟
const initLol = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/appsgame', {})
    if (response.data.status === 1 && response.data.data.result) {
      const list = response.data.data.result.map((item, index) => ({
        rank: index + 1,
        title: item.sTitle,
        url: 'https://lol.qq.com/news/detail.shtml?docid='+item.iDocID,
        hot: item.iTotalPlay
      }))

      const baidutiebaItem = hotLists.value.find(item => item.code === 'appsgame')
      if (baidutiebaItem) {
        baidutiebaItem.list = list
        baidutiebaItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//澎湃新闻
const initPengPai = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/thepaper', {})
    if (response.data.resultCode === 1 && response.data.data.hotNews) {
      const list = response.data.data.hotNews.map((item, index) => ({
        rank: index + 1,
        title: item.name,
        url: 'https://www.thepaper.cn/newsDetail_forward_'+item.contId,
        hot: item.praiseTimes
      }))

      const baidutiebaItem = hotLists.value.find(item => item.code === 'thepaper')
      if (baidutiebaItem) {
        baidutiebaItem.list = list
        baidutiebaItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//百度百科
const initBaiduBaiKe = async () => {
  try {
    //月要单独处理一下
    const month = getCurrentMonth()
    const day = getCurrentDay()
    const response = await axiosUtil.post('api/hotdata/eventsOnHistorybaidu?month='+month, {})
    if (response.data) {
      const dataM = response.data[month];
      const dataD = dataM[month+day]
      console.log(dataM)
      console.log(dataD)
      const list =dataD.map((item, index) => ({
        rank: index + 1,
        title: getChineseText(item.title),
        url: item.link,
      }))

      const baidutiebaItem = hotLists.value.find(item => item.code === 'baidubk')
      if (baidutiebaItem) {
        baidutiebaItem.list = list
        baidutiebaItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

const getCurrentMonth = () => {
  const now = new Date()
  return (now.getMonth() + 1).toString().padStart(2, '0')
}

const getCurrentDay = () => {
  const now = new Date()
  return now.getDate().toString().padStart(2, '0')
}

const getChineseText = (str:string) =>{
  // 先去除HTML标签
  const noHtml = str.replace(/<[^>]+>/g, '')
  // 只保留汉字和中文标点
  return noHtml.match(/[\u4e00-\u9fa5，。！？、“”‘’（）《》【】·：；——…]/g)?.join('') || ''
}

//微信读书
const initWeRead = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/weread', {})
    if (response.data.books) {
      const list = response.data.books.map((item, index) => ({
        rank: index + 1,
        title: item.bookInfo.title,
        url: 'https://weread.qq.com/web/bookDetail/'+item.bookInfo.bookId,
        hot: item.readingCount
      }))

      const baidutiebaItem = hotLists.value.find(item => item.code === 'weread')
      if (baidutiebaItem) {
        baidutiebaItem.list = list
        baidutiebaItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

//网易云音乐
const initWangyiyun = async () => {
  try {
    const response = await axiosUtil.post('api/hotdata/music163', {})
    if (response.data.code === 200 && response.data.result.tracks) {
      const list = response.data.result.tracks.map((item, index) => ({
        rank: index + 1,
        title: item.name,
        url: 'https://music.163.com/#/song?id='+item.id,
        hot: item.duration
      }))

      const baidutiebaItem = hotLists.value.find(item => item.code === 'music163')
      if (baidutiebaItem) {
        baidutiebaItem.list = list
        baidutiebaItem.lastUpdate = Date.now()
      }
    }
  } catch (error) {
    console.error('获取微博热搜失败:', error)
  }
}

const hotLists = ref([
  // {
  //   title: '微博',
  //   code: 'hotSearchweibo',
  //   text: '热搜榜',
  //   list: [],
  //   lastUpdate: 0
  // },
  {
    title: '哔哩哔哩',
    code: 'rankingbili',
    text: '热门榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '抖音',
    code: 'hotdyrd',
    text: '热点榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '今日头条',
    code: 'hottoutiao',
    text: '热榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '知乎',
    code: 'hotzhihu',
    text: '热榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '百度',
    code: 'topbaidu',
    text: '热搜榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '百度贴吧',
    code: 'tiebabaidu',
    text: '热议榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '腾讯新闻',
    code: 'hotinews',
    text: '热点榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '稀土掘金',
    code: 'apijuejin',
    text: '热榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '网易新闻',
    code: 'hot163',
    text: '热榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '英雄联盟',
    code: 'appsgame',
    text: '更新公告',
    list: [],
    lastUpdate: 0
  },
  {
    title: '澎湃新闻',
    code: 'thepaper',
    text: '热榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '百度百科',
    code: 'baidubk',
    text: '历史上的今天',
    list: [],
    lastUpdate: 0
  },
  {
    title: '微信读书',
    code: 'weread',
    text: '飙升榜',
    list: [],
    lastUpdate: 0
  },
  {
    title: '网易云音乐',
    code: 'music163',
    text: '热歌榜',
    list: [],
    lastUpdate: 0
  }
])

const theme = ref(utils.getTheme());

// 获取排名标签类型
const getRankType = (rank: number) => {
  switch(rank) {
    case 1:
      return 'danger'  // 红色
    case 2:
      return 'warning' // 橙色
    case 3:
      return '' // 浅橙色
    default:
      return 'info'
  }
}

// 在<script setup lang="ts">中添加方法
const handleTitleClick = (item: any) => {
  window.open(item.url)
}

const hoverHotIndex = ref<number | null>(null)
const hoverHotListCode = ref<string | null>(null)

const handleHotMouseEnter = (rank: number, code: string) => {
  hoverHotIndex.value = rank
  hoverHotListCode.value = code
}
const handleHotMouseLeave = () => {
  hoverHotIndex.value = null
  hoverHotListCode.value = null
}
const handleExtractClick = (hot:any, item: any) => {
  // 这里写你要的点击事件，比如弹窗/复制
  // alert('提取文案：' + item.title)
  showExtractDialog.value = false;
  if(hot.code === 'hottoutiao' || hot.code === 'hotzhihu' || hot.code === 'topbaidu' ||
     hot.code === 'tiebabaidu' || hot.code === 'hotinews' || hot.code === 'apijuejin' ||
     hot.code === 'hot163' || hot.code === 'appsgame' || hot.code === 'thepaper' || hot.code === 'baidubk' || hot.code === 'weread') {
    showExtractDialog.value = true;
    urlInfo.value = {
      platformName: item.title,
      platformLink: item.url
    }
  } else {
    showTitleDialog.value = true;
    currentTitle.value = item.title;
  }
}

const formatHot = (hot: any) => {
  const num = Number(hot)
  if (!isNaN(num) && num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return hot
}
</script>

<style scoped>
.son-page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-container {
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(5px);
}

.header-container {
  padding: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.el-main {
  padding: 20px;
  height: 90vh;
  overflow: hidden;
}

.el-row {
  margin: 0 !important;
}

.el-col {
  height: auto;
  margin-bottom: 20px;
}

.area-container {
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.area-container::-webkit-scrollbar {
  width: 6px;
}

.area-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.area-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.right-area {
  min-height: 70vh;
}

.hot-list-row {
  margin: 0;
  flex: 1;
}

.hot-list-card {
  background: rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 18px 12px;
  height: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 10px;
}

.hot-list-title {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
  font-size: 1.15em;
  font-weight: bold;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hot-list-container {
  height: 400px;
  overflow-y: auto;
}

.hot-list-container::-webkit-scrollbar {
  width: 6px;
}

.hot-list-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.hot-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.hot-list-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.hot-list-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hot-list-li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1em;
  color: #fff;
  height: 36px;
}

.hot-rank {
  margin-right: 10px;
  min-width: 22px;
  text-align: center;
  background-color: #f0c78a !important;
  border-color: #f0c78a !important;
  color: #fff !important;
}

.hot-title {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hot-hot {
  margin-left: 10px;
  font-size: 0.95em;
  color: #ffd700;
}

.hot-list-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.update-time {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9em;
}

.refresh-icon {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-icon:hover {
  color: #fff;
  transform: rotate(180deg);
}

:deep(.el-tag--warning) {
  background-color: #e6a23c !important;
  border-color: #e6a23c !important;
}

/* :deep(.el-tag:not(.el-tag--danger):not(.el-tag--warning):not(.el-tag--info)) {
  background-color: #f0c78a !important;
  border-color: #f0c78a !important;
  color: #fff !important;
} */

.extract-btn {
  background: #409eff;
  color: #fff !important;
  border-radius: 4px;
  padding: 2px 10px;
  transition: all 0.2s;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(64,158,255,0.15);
}
</style>
